<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 表格</title>
    <style type="text/css">
        #customers{
            font-family: "Trebuchet MS", Arial,Helvetica,"sans serif";
            width: 100%;
            border-collapse: collapse;  /*合并边界*/
        }

        #customers td, #customers th{
            font-size: 1em;
            border: 1px solid #98bf21;
            padding: 3px 7px 2px 7px;
        }

        #customers th{
            font-size: 1.1em;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #a7c942;
            color: #ffffff;
        }

        #customers tr.alt td{
            color: #000000;
            background-color: #eaf2d3;
        }

        /* 测试表格框之间的空白  */
        table.one{
            border-collapse: collapse;
            border-spacing: 10px;
        }

        /*  左右  上下 的边距 */
        table.two{
            border-collapse: separate;
            border-spacing: 10px 50px;
        }

    </style>
</head>
<body>
  <table id="customers">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>

    <tr>
        <td>Apple</td>
        <td>Steven Jobs</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Baidu</td>
        <td>Li YanHong</td>
        <td>China</td>
    </tr>

    <tr>
        <td>Google</td>
        <td>Larry Page</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Lenovo</td>
        <td>Liu Chuanzhi</td>
        <td>China</td>
    </tr>

    <tr>
        <td>Microsoft</td>
        <td>Bill Gates</td>
        <td>USA</td>
    </tr>

    <tr class="alt">
        <td>Nokia</td>
        <td>Stephen Elop</td>
        <td>Finland</td>
    </tr>
   </table>

  <table class="one" border="1">
    <tr>
        <td>DeLong</td>
        <td>Yang</td>
    </tr>
    <tr>
        <td>Bush</td>
        <td>James</td>
    </tr>
  </table>
  <table class="two" border="1">
      <tr>
          <td>Carter</td>
          <td>Thomas</td>
      </tr>
      <tr>
          <td>Gates</td>
          <td>Bill</td>
      </tr>
  </table>


<p><b>注释：</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>